<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<metaname ="viewport"content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css"
	href="/resource/css/bootstrap.min.css" />
<script type="text/javascript" src="/resource/js/jquery-3.2.1.js"></script>
<script type="text/javascript" src="/resource/js/bootstrap.min.js"></script>
</head>
<body>
	<div class="container">
		<form action="add" id="form">
			<div class="form-group row">
				<label for="specName" class="col-sm-2 col-form-label">规格名称</label>
				<div class="col-sm-4">
					<input type="text" class="form-control" id="specName"
						name="specName">
				</div>
			</div>
			<div class="form-group row">
				<div class="col-sm-1"></div>
				<div class="col-sm-6">
					<table id="table">
						<tr>
							<td>属性名称</td>
							<td>显示顺序</td>
							<td><button type="button" onclick="addLine()">添加</button></td>
						</tr>
						<tr>
							<td><input name="options[0].optionName"></td>
							<td><input type="number" name="options[0].orders"></td>
							<td><button type="button" onclick="removeLine($(this))">删除</button></td>
						</tr>
					</table>
				</div>
			</div>
			<div class="form-group row">
				<button type="button" onclick="add()">提交</button>
			</div>
		</form>
	</div>
</body>
<script type="text/javascript">
var i=1;
function addLine() {
	var td1="<td><input type='text' name='options["+i+"].optionName'></td>";
	var td2="<td><input type='number' name='options["+i+"].orders'></td>";
	var td3="<td><button type='button' onclick='removeLine($(this))'>删除</button></td>";
	$("#table").append("<tr>"+td1+td2+td3+"</tr>");
	   i++;
     }
	function removeLine(btn){
		btn.parent().parent().remove();
	}
	function add(){
		var formData=new FormData($("#form")[0]);
		$.ajax({
				url:"/spec/add",
				type:"post",
				data:formData,
				processData:false,
				contentType:false,
				success:function(flag){
					//alert("123");
					alert(flag);
				}
			
		   })
			
		
	}
</script>
</html>